<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>position</title>
	<style>
		#absol{width:800px; height:600px;border:1px solid #880088;position:relative;}
		#rela{width:800px; height:600px;border:1px solid #880088;position:relative;}
		#mo,#br,#si{with:100px; height:100px; border:1px solid #ff0000;position:absolute;}
	
		#mo{left:30px; top:10px; height:20px;}
		#br{left:65px; top:10px; height:20px;}
		#si{left:100px; top:10px; height:20px;}
		
		#mo2,#br2,#si2{width:100px; height:100px; border:1px solid #ff0000;position:relative;}
		#mo2{left:10px; top:10px;}
		#br2{left:120px; top:-91px;}
		#si2{left:230px; top:-192px;}
		
		
		#blk{width:800px; height:100px;border:1px solid #880088;position:relative;}
		#mo3,#br3,#si3{width:100px; height:100px; border:1px solid #ff0000; display:inline-block;}
	</style>
	

</head>
<body>
	<h1>absolute</h1>
	<div id='absol'>
		<div id='mo'>엄마</div>
		<div id='br'>아들</div>
		<div id='si'>딸임</div>
		
	</div>
	
	
	<h1>relative</h1>
	<div id='rela'>
		<div id='mo2'>엄마</div>
		<div id='br2'>아들</div>
		<div id='si2'>딸임</div>
	</div>
	
	
	<h1>display:block</h1>
	<div id='blk'>
		<div id='mo3'>엄마</div>
		<div id='br3'>아들</div>
		<div id='si3'>딸임</div>	
	</div>
	
	

	
</body>
</html>